<script setup lang="ts">
import { ref, reactive, onMounted, computed } from "vue";
import ReCol from "@/components/ReCol";
import { statistics_goods } from "@/api/index";
import { ArrowRight } from "@element-plus/icons-vue";

const props = defineProps({
  element: {
    type: Object,
    required: true,
  },
});

const colorList = ['#4c4fe8', '#45b1eb', '#0ac259', '#f29529', '#ec5959']
const productData = ref([])

onMounted(() => {
  getCustomerDirectorData()
});

function getCustomerDirectorData() {
  statistics_goods().then((res) => {
    let resData = res.data
    productData.value = resData
  });
}
</script>

<template>
  <re-col
    v-motion
    class="mb-[12px]"
    :value="8"
    :xs="24"
    :sm="24"
    :md="24"
    :initial="{
      opacity: 0,
      y: 100
    }"
    :enter="{
      opacity: 1,
      y: 0,
      transition: {
        delay: 400
      }
    }"
  >
    <el-card class="bar-card" shadow="never">
      <div class="flex justify-between items-center">
        <b class="text-md font-medium" v-if="props.element.scope == 'company'">成交产品概况</b>
        <b class="text-md font-medium" v-if="props.element.scope == 'department'">组内成交产品概况</b>
        <b class="text-md font-medium" v-if="props.element.scope == 'self'">我的成交产品概况</b>
        <el-button round style="padding: 8px"
          >了解更多<el-icon class="el-icon--right"><ArrowRight /></el-icon
        ></el-button>
      </div>
      <div class="productData mt-3">
        <div class="progress mt-2">
          <div
            class="bar"
            v-for="(item, index) in productData"
            :key="index"
            :style="{
              width: `${Number(item.percentage) * 100}%`,
              background: colorList[index]
            }"
          ></div>
        </div>
        <div class="dataList mt-7">
          <div class="item itemBt">
            <div><b>产品名</b></div>
            <div><b>成交金额</b></div>
            <div><b>占比</b></div>
          </div>
          <div class="item" v-for="(item, index) in productData" :key="index">
            <div>
              <p :style="{ background: colorList[index] }"><span></span></p>
              {{ item.name }}
            </div>
            <div>{{ item.price }}</div>
            <div>{{ Number(item.percentage) * 100 }}%</div>
          </div>
        </div>
      </div>
    </el-card>
  </re-col>
</template>

<style lang="scss" scoped>
.productData {
  height: 280px;
  overflow: hidden;

  .progress {
    display: flex;
    align-items: center;

    .bar {
      border-radius: 5px;
      height: 8px;
      margin-right: 8px;

      &:last-child {
        margin-right: 0;
      }
    }
  }

  .dataList {
    .item {
      display: flex;
      align-items: center;
      margin-top: 8px;
      font-size: 14px;

      div:nth-child(1) {
        flex: 1;
        overflow: hidden;
        display: flex;
        align-items: center;

        p {
          width: 16px;
          height: 16px;
          border-radius: 50%;
          margin-right: 10px;
          display: flex;
          align-items: center;
          justify-content: center;

          span {
            width: 8px;
            height: 8px;
            border-radius: 50%;
            background-color: #ffffff;
          }
        }
      }

      div:nth-child(2) {
        width: 30%;
        text-align: center;
      }

      div:nth-child(3) {
        width: 16%;
        text-align: center;
        color: #929292;
      }
    }

    .itemBt {
      margin-top: 0;

      b {
        font-size: 15px;
        color: #000000;
      }
    }
  }
}
</style>
